<template>
  <el-container v-if="!isLoginPage" class="app-container" >
    <el-aside width="200px" class="sidebar">
      <div class="logo">System</div>
      <el-menu
          :default-active="activeMenu"
          router
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
      >
        <el-menu-item index="/">
          <el-icon><Stopwatch /></el-icon>
          <template #title>仪表盘</template>
        </el-menu-item>

        <el-menu-item index="/personal">
          <el-icon><House /></el-icon>
          <span>个人中心</span>
        </el-menu-item>

        <el-sub-menu index="sys">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/users">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/menus">
            <el-icon><Menu /></el-icon>
            <span>菜单管理</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/chicken">
          <el-icon><ForkSpoon /></el-icon>
          <span>人是饭 铁是钢</span>
        </el-menu-item>

      </el-menu>
    </el-aside>

    <el-container>
      <!-- 头部区域 -->
      <el-header class="header">
        <div class="header-title">{{ currentTitle }}</div>

        <!-- 用户信息区域 -->
        <div class="user-info">
          <el-dropdown>
            <!-- 调整后的用户信息容器 -->
            <div class="user-info-wrapper">
              <!-- 垂直排列的头像和昵称 -->
              <div class="user-profile">
                <el-avatar
                    :size="40"
                    src="./src/assets/ai.jpg"
                    class="user-avatar"
                />
                <span class="user-name">kayn</span>
              </div>
              <!-- 下拉图标 -->
              <el-icon class="dropdown-icon"><arrow-down /></el-icon>
            </div>

            <!-- 下拉菜单保持不变 -->
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-main>
        <router-view v-slot="{ Component }">
          <transition name="fade-transform" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>

  <!-- 独立登录页显示 -->
  <div v-else class="login-wrapper">
    <router-view />
  </div>
</template>

<script setup>
import {computed} from 'vue'
import {useRoute} from 'vue-router'
import {ForkSpoon} from "@element-plus/icons-vue";

const route = useRoute()

const activeMenu = computed(() => route.path)

const currentTitle = computed(() => route.meta?.title || '后台管理系统')

const isLoginPage = computed(() => route.path === '/login')

const handleLogout = () => {
  // 清除所有登录相关状态
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')

  // 强制刷新页面清除内存中的状态
  window.location.reload()

  // 跳转到登录页（使用replace避免回退）
  route.replace('/login').catch(() => {})
}

</script>

<style scoped>
.app-container {
  height: 100vh;
}

.sidebar {
  background-color: #304156;
  height: 100vh;
}

.logo {
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  background-color: #2b2f3a;
}

/* 头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  height: 60px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* 用户信息容器 */
.user-info-wrapper {
  position: relative;
  padding-right: 24px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    opacity: 0.8;
  }
}

/* 用户资料垂直布局 */
.user-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* 用户头像样式 */
.user-avatar {
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;

  &:hover {
    transform: scale(1.1);
  }
}

/* 用户名字样式 */
.user-name {
  font-size: 12px;
  font-weight: 500;
  color: #666;
}

/* 下拉图标定位 */
.dropdown-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 12px;
  transition: transform 0.2s;
}

/* 下拉菜单激活状态 */
.el-dropdown.is-active .dropdown-icon {
  transform: translateY(-50%) rotate(180deg);
}

.el-menu-item .el-icon {
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
}
</style>